<template>
  <div class="container">
    <el-dialog title="预览文章" :visible.sync="dialogFormVisible" width="50%">
      <el-form label-width="80px" size="mini" :model="cont">

        <!-- 标题 -->
        <div class="title">
          <h2>{{ cont.title }}</h2>
          <div>
              <span>{{cont.createTime | parseTimeByString}}</span>
              <span>{{cont.username}}</span>
              <span>
                <i class="el-icon-view"></i>
                {{cont.visits}}</span>
          </div>
        </div>

        <!-- <el-row type='flex'>
          <el-col :span="4"><span v-html="cont.creatorID"></span></el-col>
          <el-col :span="4"><div><span v-html="cont.articleBody"></span></div></el-col>
          <el-col :span="16"><span v-html="cont.visits"></span></el-col>
        </el-row> -->

        <!-- 正文 -->
        <div v-html="cont.articleBody" class="content">
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// import dayjs from 'dayjs'
export default {
  // 过滤器
  /* filters: {
    // 时间格式化
    formatDate: function (value, str = 'YYYY/MM/DD') {
      return dayjs(value).format(str)
    }
  }, */
  props: {
    cont: {
      type: Object,
      require: true
    }
  },
  computed: {
    according () {
      return this.cont.videoURL !== ''
    }
  },
  data () {
    return {
      dialogFormVisible: false
    }
  }
}
</script>

<style scoped lang='scss'>
.content{
  background: #f5f5f5;
    padding: 10px;
}
.title{
    border-bottom: 1px dashed #ccc;
    padding-bottom: 10px;
    span{
      margin-left: 10px;
      margin-top: 10px;
    }
}
</style>
